@import './reset.scss';

// 定义一个全局变量，表示当前样式的主题
$curTheme: 'light';

// 主题数据
$themes: (
  // 明亮主题
  light: (bodyBackgroundColor: #F9FAFE,
    headerBackgroundColor: #FFF,
    menuBackgroundColor: #FFF,
    fontColor: #000,
    menuItemBackgroundColor: #FFF,
    menuItemActiveBackgroundColor: #2A8DD8,
    menuItemColor: #000,
    menuItemActiveColor: #FFF,
    treeNodeHoverBgColor: #E4F3FF,
    treeNodeBgColor: #FAFAFD,
    editDialogBorderColor: #C7D8EE,
    editDialogLabelBgColor: #ECF2F9,

    menuWidth: 290px,
    menuItemHeight: 44px,
    borderColor: #E1E1E5,
    borderRadius: 5px,
  ),

  // 暗黑主题
  dark: (bodyBackgroundColor: #1e1e20,
    headerBackgroundColor: #161618,
    menuBackgroundColor: #1e1e20,
    fontColor: #FFF,
    menuItemBackgroundColor: #1e1e20,
    menuItemActiveBackgroundColor: #161618,
    menuItemColor: #FFF,
    menuItemActiveColor: #44bd87,
    treeNodeHoverBgColor: #161618,
    treeNodeBgColor: #1e1e20,
    editDialogBorderColor: #FFF,
    editDialogLabelBgColor: #1e1e20,

    menuWidth: 290px,
    menuItemHeight: 44px,
    borderColor: #E1E1E5,
    borderRadius: 5px,
  ),
);

// 根据传入的全局样式名，获取其值
@function getVar($paramName) {
  $themeMap: map-get($themes, $curTheme);
  @return map-get($themeMap, $paramName);
}

@mixin useTheme() {
  @each $key, $value in $themes {
    // 这一句是给当前的主题重新赋值，!global表示覆盖全局变量
    $curTheme: $key !global;

    html[data-theme='#{$key}'] & {
      @content;
    }
  }
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: PingFang SC, sans-serif;

  @include useTheme {
    color: getVar('fontColor');
    background-color: getVar('bodyBackgroundColor');
  }

}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px rgba(144, 147, 153, 0.3);
  background: rgba(144, 147, 153, 0.1);

  border-radius: 1px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(144, 147, 153, 0.3);
  -webkit-box-shadow: inset 0 0 1px rgba(144, 147, 153, 0.3);
}

@font-face {
  font-family: "PingFang SC";
  src: url("./fonts/pingfang-sc.ttf");
}